import { Table } from 'antd';
import axios from 'axios';
import { zhCN } from 'date-fns/locale';
import React, { useEffect, useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import config from '../config';

const ReservoirTemperature = () => {
  const [data, setData] = useState([]);
  const [selectedStartTime, setSelectedStartTime] = useState(null);
  const [selectedEndTime, setSelectedEndTime] = useState(null);

  useEffect(() => {
    console.log('ReservoirTemperature component rendered');
  }, []);

  useEffect(() => {
    const token = localStorage.getItem('token');
    axios.get(`${config.apiUrl}/reservoirTemperature/latest`, {
      headers: {
        'token': token
      }
    })
    .then(response => {
      if (response.data.code === 200) {
        const tableData = response.data.data.map(item => ({
          key: item.id,
          reservoirTemperature: item.reservoirTemperature,
          time: item.time,
          deviceId: item.deviceId,
        }));
        setData(tableData);
      }
    })
    .catch(error => {
      console.error('Error fetching latest reservoir temperature data:', error);
    });
  }, []);

  useEffect(() => {
    const token = localStorage.getItem('token');
    if (selectedStartTime && selectedEndTime) {
      axios.get(`${config.apiUrl}/reservoirTemperature/selectByTime?startTime=${selectedStartTime.toISOString()}&endTime=${selectedEndTime.toISOString()}`, {
        headers: {
          'token': token
        }
      })
      .then(response => {
        if (response.data.code === 200) {
          const tableData = response.data.data.map(item => ({
            key: item.id,
            reservoirTemperature: item.reservoirTemperature,
            time: item.time,
            deviceId: item.deviceId,
          }));
          setData(tableData);
        }
      })
      .catch(error => {
        console.error('Error fetching reservoir temperature data:', error);
      });
    }
  }, [selectedStartTime, selectedEndTime]);

  const columns = [
    { title: 'ID', dataIndex: 'key', key: 'key' },
    { title: '环境温度', dataIndex: 'reservoirTemperature', key: 'reservoirTemperature' },
    { title: '时间', dataIndex: 'time', key: 'time' },
    { title: '设备ID', dataIndex: 'deviceId', key: 'deviceId' },
  ];

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      </div>
      <h2>环境温度数据</h2>
      <div style={{ marginBottom: 16, display: 'flex', gap: '16px' }}>
        <DatePicker
          selected={selectedStartTime}
          onChange={(date) => setSelectedStartTime(date)}
          showTimeSelect
          timeFormat="HH:mm"
          timeIntervals={5}
          dateFormat="yyyy-MM-dd HH:mm:ss"
          placeholderText="起始日期"
          locale={zhCN}
          style={{ marginRight: 8 }}
        />
        <DatePicker
          selected={selectedEndTime}
          onChange={(date) => setSelectedEndTime(date)}
          showTimeSelect
          timeFormat="HH:mm"
          timeIntervals={5}
          dateFormat="yyyy-MM-dd HH:mm:ss"
          placeholderText="结束日期"
          locale={zhCN}
        />
      </div>
      <Table 
        dataSource={data} 
        columns={columns} 
        pagination={{ pageSize: 10 }}
      />
    </div>
  );
};

export default ReservoirTemperature;